@extends('layout.master')

@section('content-header')
    <h1>Tamu</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ URL::route('tamus.index') }}"><i class="fa fa-user"></i> Tamu</a></li>
        <li class="active"><i class="fa fa-plus-square"></i> Tambah</li>
    </ol>
@stop

@section('content')

<style type="text/css">
	/*Style modal lokasi pendamping*/
	.modal-dialog {
		width: 80%;
		max-height: 80%;
	}
	.search {
		margin-top: -2px;
		float: right;
		padding: 0;
		margin-bottom: 20px;
	}
	.modal-dialog .col-sm-3 {
		cursor: pointer;
	}
	.lokasi-modal {
		margin: 2px;
		width: 100%;
		text-align: left;
		cursor: pointer;
	}
	/*end modal pendamping*/

	/*Style header form*/
	.table-responsive .header-form {
		margin: 30px 0 15px 0 !important;
		padding: 15px;
		background-color: #f4f4f4;
		border-left: 5px solid #ddd;
	}
	.table-responsive .header-form:first-child {
		margin: 0 0 10px 0 !important;
	}
	/*end header form*/
</style>

<div class="row">
    <div class="col-xs-12">
		{{ Form::open(array('route'=>array('tamus.store'), 'method'=>'POST', 'class'=>'form-horizontal', 'role'=>'form')) }}
			{{Form::hidden('user_id', Auth::user()->id)}}
	        <div class="box">
	            <div class="box-body table-responsive">
	            	<div class="callout callout-warning">
			    		<h4>Informasi!</h4>
			    		<p>Mohon isi data dengan lengkap.</p>
				    	@foreach ($errors->all() as $element)
				    		{{ $element }}</br>
				    	@endforeach
				    </div>

	            	<h4 class="header-form">Data Tamu</h4>
					<div class="form-group">
						<label class="col-sm-2 control-label required">No. KTP</label>
						<div class="col-sm-10">
							{{Form::text('no_ktp', null, array('class'=>'form-control', 'placeholder'=>'Nomor KTP'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Nama</label>
						<div class="col-sm-10">
							{{Form::text('nama', null, array('class'=>'form-control uppercase-text', 'placeholder'=>'Nama Tamu'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Jenis Kelamin</label>
						<div class="col-sm-10">
							<div class="form-control" style="border:none">
								{{Form::radio('jenis_kelamin', 'L')}}
								{{'Laki-laki'}}
								{{Form::radio('jenis_kelamin', 'P')}}
								{{'Perempuan'}}
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Tanggal Lahir</label>
						<div class="col-sm-4">
							{{Form::text('tanggal_lahir', null, array('class'=>'form-control', 'id'=>'tanggal_lahir', 'type'=>'text', 'placeholder'=>'Tanggal Lahir'))}}
						</div>
						<label class="col-sm-2 control-label required">Tempat Lahir</label>
						<div class="col-sm-4">
							{{Form::text('tempat_lahir', null, array('class'=>'form-control', 'placeholder'=>'Tempat Lahir'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Agama</label>
						<div class="col-sm-4">
							{{ Form::select('agama_id', $agamas, null, array('class'=>'form-control')) }}
						</div>
						<label class="col-sm-2 control-label required">Status kawin</label>
						<div class="col-sm-4">
							{{Form::select('status_kawin', array('' => '- - Pilih Status Kawin - -', 'kawin' => 'Kawin', 'belum kawin' => 'Belum Kawin', 'cerai mati' => 'Cerai Mati', 'cerai hidup' => 'Cerai Hidup'), null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Golongan Darah</label>
						<div class="col-sm-4">
							{{Form::select('golongan_darah', array('' => '- - Pilih Golongan Darah - -', 'O' => 'O', 'A' => 'A', 'B' => 'B', 'AB' => 'AB'), null, array('class'=>'form-control'))}}
						</div>
						<label class="col-sm-2 control-label required">Jenis Pekerjaan</label>
						<div class="col-sm-4">
							{{Form::select('jenis_pekerjaan_id', $jenispekerjaans, null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Alamat Asal</label>
						<div class="col-sm-10">
							{{Form::textarea('alamat', null, array('class'=>'form-control', 'placeholder'=>'Alamat Asal'))}}
						</div>
					</div>

					<h4 class="header-form">Penduduk Penjamin</h4>
					<div class="form-group">
						{{ Form::label('lokasi_id', 'Lokasi', array('class' => 'col-sm-2 control-label required')) }}
						<div class="col-sm-6">
							{{Form::hidden('lokasi_id', null, array())}}
							{{Form::text('lokasi_nama', null, array('class'=>'form-control', 'disabled'=>'disabled', 'id'=>'lokasi_nama'))}}
						</div>
						<div class="col-sm-2" style="padding-top:10px;">
							<a href="#" class="cari-lokasi"><i class="fa fa-folder"></i> Daftar Nama Lokasi</a>
						</div>
					</div>
					<div class="form-group">
						{{ Form::label('penduduk_id', 'Penduduk Penjamin', array('class' => 'col-sm-2 control-label')) }}
						<div class="col-sm-10">
							{{Form::hidden('penduduk_id', null, array())}}
							{{Form::text('penduduk_nama', null, array('class'=>'form-control', 'disabled'=>'disabled', 'id'=>'penduduk_nama'))}}
						</div>
					</div>

					<h4 class="header-form">Detail</h4>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Tanggal Lapor</label>
						<div class="col-sm-10">
							{{Form::text('tanggal_lapor', null, array('class'=>'form-control', 'id'=>'tanggal_lapor', 'data-date-format'=>'yyyy-mm-dd', 'type'=>'text', 'placeholder'=>'Tanggal Lapor'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Berlaku Sampai</label>
						<div class="col-sm-10">
							{{Form::text('tanggal_akhir', null, array('class'=>'form-control', 'id'=>'tanggal_akhir', 'data-date-format'=>'yyyy-mm-dd', 'type'=>'text', 'placeholder'=>'Tanggal Berlaku Sampai'))}}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label required">Alasan Tinggal</label>
						<div class="col-sm-10">
							{{Form::textarea('alasan_tinggal', null, array('class'=>'form-control', 'placeholder'=>'Alasan Tinggal'))}}
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							{{ HTML::decode(Form::button('<i class="fa fa-refresh"></i> Reset', array('class'=>'btn btn-success reset-all','type'=>'reset'))) }}
							{{ HTML::decode(Form::button('<i class="fa fa-floppy-o"></i> Save', array('class'=>'btn btn-primary','type'=>'submit'))) }}
						</div>
					</div>
	            </div><!-- /.box-body -->
	        </div><!-- /.box -->
		{{ Form::close() }}
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    $(function() {
    	// -------------Datepicker tanggal lahir-------------------------
    	$("#tanggal_lahir").ionDatePicker({
				lang: "en",                     // language
				sundayFirst: false,             // first week day
				years: "80",                    // years diapason
				format: "YYYY-MM-DD",           // date format
			});

    	// -------------Datepicker lapor dan akhir tamu-------------------------
    	var nowTemp = new Date();
    	var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    	var checkin = $('#tanggal_lapor').datepicker({
    	}).on('changeDate', function(ev) {

    		checkout.setValue(ev.date.valueOf());

    		if (ev.date.valueOf() > checkout.date.valueOf()) {
    			var newDate = new Date(ev.date)
    			newDate.setDate(newDate.getDate());
    			checkout.setValue(newDate);
    		}
    		checkin.hide();
    		$('#tanggal_akhir')[0].focus();
    	}).data('datepicker');

    	var checkout = $('#tanggal_akhir').datepicker({
    		onRender: function(date) {
    			return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';
    		}
    	}).on('changeDate', function(ev) {
    		checkout.hide();
    	}).data('datepicker');

    	// -------------Select lokasi pendamping-------------------------
		$('.row').on('click', '.cari-lokasi', function(event) {
			event.preventDefault();
			var search = '';
			var lokasi = '';

            $.ajax({
                url: '/lokasipendampingmodal/',
                type: 'POST',
                dataType: 'json',
                data: {search: search}
            })

            .done(function(data) {
            	if (data != '') {
            		lokasi += '<div class="input-group search"><span class="input-group-addon"><i class="fa fa-search"></i> Cari lokasi</span><input name="search_lokasi" type="text" class="form-control" id="search_lokasi"></div>';

                	lokasi += '<div class="row">';
                    $.each(data, function(index, val) {
                         lokasi+= '<div class="col-sm-3"><a class="lokasi-modal"><input type="hidden" class="lokasi_id_modal" value="'+val.id+'"><input type="hidden" class="lokasi_nama_modal" value="'+val.nama+'"><input type="hidden" class="penduduk_id_modal" value="'+val.penduduk_id+'"><input type="hidden" class="penduduk_nama_modal" value="'+val.penduduk_nama+'"><span>'+val.nama+'</span> | <i class="fa fa-info-circle btn-tooltip" data-toggle="tooltip" data-placement="top" title="'+val.alamat+'"></i></a></div>';
                    });

	            	lokasi += '</div>';
            	}else{
            		lokasi_modal+= '<div class="col-sm-12">Data tidak ditemukan.</div>';
            	};
            })
            .fail(function() {
                // console.log("error");
            })
            .always(function() {
                // console.log("complete");

                bootbox.dialog({
	                message: lokasi,
	                title: 'Lokasi Penjamin',
	                buttons: {
	                    main: {
	                        label: "Cancel",
	                        className: "btn-danger"
	                    }
	                }
	            });
	            $('body').find('.btn-tooltip').tooltip('hide');
            });
		});

    	// -------------Searching lokasi pendamping-------------------------
		$('body').on('change', '#search_lokasi', function(event) {
			event.preventDefault();
			var search = $(this).val();
			$('body').find('.modal-body').find('.row').html('');
			$('body').find('.modal-body').find('.row').html('<div class="col-sm-12"><i class="fa fa-refresh fa-spin"></i> Loading . . .</div>');
			var lokasi_modal = '';

            $.ajax({
                url: '/lokasipendampingmodal/',
                type: 'POST',
                dataType: 'json',
                data: {search: search}
            })

            .done(function(data) {
            	if (data != '') {
                    $.each(data, function(index, val) {
                    	lokasi_modal+= '<div class="col-sm-3"><a class=" lokasi-modal"><input type="hidden" class="lokasi_id_modal" value="'+val.id+'"><input type="hidden" class="lokasi_nama_modal" value="'+val.nama+'"><input type="hidden" class="penduduk_id_modal" value="'+val.penduduk_id+'"><input type="hidden" class="penduduk_nama_modal" value="'+val.penduduk_nama+'"><span>'+val.nama+'</span> | <i class="fa fa-info-circle btn-tooltip" data-toggle="tooltip" data-placement="top" data-original-title="'+val.alamat+'"></i></a></div>';
                    });
            	}else{
            		lokasi_modal+= '<div class="col-sm-12">Data tidak ditemukan.</div>';
            	};
            })
            .fail(function() {
                // console.log("error");
            })
            .always(function() {
                // console.log("complete");
                $('body').find('.modal-body').find('.row').html('');
                $('body').find('.modal-body').find('.row').html(lokasi_modal);
                $('body').find('.btn-tooltip').tooltip('hide');
            });
		});

		// -------------Default lokasi pendamping-------------------------
		$('#lokasi_nama').val("- - Pilih Lokasi Penjamin - -");
		$('#penduduk_nama').val("-");
		$('.table-responsive').on('click', '.reset-all', function(event) {
			event.preventDefault();
			$('#lokasi_nama').val("- - Pilih Lokasi Penjamin - -");
			$('#lokasi_id').val("");
		});

    	// -------------Select penduduk pendamping-------------------------
    	$('#penduduk_nama').val('-');
    	$('body').on('click', '.lokasi-modal', function(event) {
    		$(".bootbox").modal("hide");
    		$('#penduduk_nama').val('-');
            var idLokasi = $(this).find('.lokasi_id_modal').val();
            var namaLokasi = $(this).find('.lokasi_nama_modal').val();
            var idPenduduk = $(this).find('.penduduk_id_modal').val();
            var namaPenduduk = $(this).find('.penduduk_nama_modal').val();

			if (idLokasi != '') {
				$('#lokasi_id').val(idLokasi);
	        	$('#lokasi_nama').val(namaLokasi);
	        	$('#penduduk_id').val(idPenduduk);
	        	$('#penduduk_nama').val(namaPenduduk);
            }else{
                $('#penduduk_id').val("");
                $('#penduduk_nama').val('-')
            };
		});
    });
</script>
@stop